<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- 		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> -->


		<link rel="stylesheet" href="css/bootstrap.3.4.1.css">
		<link rel="stylesheet" href="css/main.css">

		<style type="text/css">

		</style>
		<title> 14.8 demo </title>
	</head>
	<body>


		<h3>table1</h3>
	
		
		<table class="table">
		
			<thead>
		
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>城市</th>
					<th>注册时间</th>
				</tr>
			</thead>
		
		
			<tbody>
				<tr class="success">
					<td>李栓丹</td>
					<td>28</td>
					<td>西安</td>
					<td>2022-04-12</td>
				</tr>
				
				
				<tr class="warning">
					<td>王铁锤</td>
					<td>28</td>
					<td>合肥</td>
					<td>2022-04-12</td>
				</tr>
				<tr class="danger">
					<td>frank</td>
					<td>18</td>
					<td>上海</td>
					<td>2022-10-12</td>
				</tr>
		
		
		
				<tr>
					<td>laoda</td>
					<td>18</td>
					<td>郑州</td>
					<td>2022-11-12</td>
				</tr>
		
		
				<tr>
					<td>whh</td>
					<td>18</td>
					<td>合肥</td>
					<td>2022-04-12</td>
				</tr>
		
			</tbody>
		
		
		
		</table>
		
		
		
		
		<h3>table2</h3>
		
		
		<table class="table table-condensed">
		
			<thead>
		
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>城市</th>
					<th>注册时间</th>
				</tr>
			</thead>
		
		
			<tbody>
		
				<tr>
					<td>frank</td>
					<td>18</td>
					<td>上海</td>
					<td>2022-10-12</td>
				</tr>
		
		
		
				<tr>
					<td>laoda</td>
					<td>18</td>
					<td>郑州</td>
					<td>2022-11-12</td>
				</tr>
		
		
				<tr>
					<td>whh</td>
					<td>18</td>
					<td>合肥</td>
					<td>2022-04-12</td>
				</tr>
		
			</tbody>
		
		
		
		</table>
		
		
		
		
		
			<h3>table3</h3>
		<table class="table table-bordered ">

			<thead>

				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>城市</th>
					<th>注册时间</th>
				</tr>
			</thead>


			<tbody>

				<tr>
					<td>frank</td>
					<td>18</td>
					<td>上海</td>
					<td>2022-10-12</td>
				</tr>



				<tr>
					<td>laoda</td>
					<td>18</td>
					<td>郑州</td>
					<td>2022-11-12</td>
				</tr>


				<tr>
					<td>whh</td>
					<td>18</td>
					<td>合肥</td>
					<td>2022-04-12</td>
				</tr>

			</tbody>



		</table>







	<h3>table4</h3>
		<table class="table  table-striped">

			<thead>

				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>城市</th>
					<th>注册时间</th>
				</tr>
			</thead>


			<tbody>

				<tr>
					<td>frank</td>
					<td>18</td>
					<td>上海</td>
					<td>2022-10-12</td>
				</tr>



				<tr>
					<td>laoda</td>
					<td>18</td>
					<td>郑州</td>
					<td>2022-11-12</td>
				</tr>


				<tr>
					<td>whh</td>
					<td>18</td>
					<td>合肥</td>
					<td>2022-04-12</td>
				</tr>


				<tr>
					<td>李栓丹</td>
					<td>28</td>
					<td>合肥</td>
					<td>2022-04-12</td>
				</tr>
				
				
				<tr>
					<td>王铁锤</td>
					<td>28</td>
					<td>合肥</td>
					<td>2022-04-12</td>
				</tr>
			</tbody>

		</table>





	<h3>table5  鼠标 在哪一行，就会区别显示 table-hover </h3>
	<table class="table  table-hover">
	
		<thead>
	
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>城市</th>
				<th>注册时间</th>
			</tr>
		</thead>
	
	
		<tbody>
	
			<tr>
				<td>frank</td>
				<td>18</td>
				<td>上海</td>
				<td>2022-10-12</td>
			</tr>
	
	
	
			<tr>
				<td>laoda</td>
				<td>18</td>
				<td>郑州</td>
				<td>2022-11-12</td>
			</tr>
	
	
			<tr>
				<td>whh</td>
				<td>18</td>
				<td>合肥</td>
				<td>2022-04-12</td>
			</tr>
	
	
			<tr>
				<td>李栓丹</td>
				<td>28</td>
				<td>西安</td>
				<td>2022-04-12</td>
			</tr>
			
			
			<tr>
				<td>王铁锤</td>
				<td>28</td>
				<td>合肥</td>
				<td>2022-04-12</td>
			</tr>
		</tbody>
	
	</table>
	
	
	
	
	
	<h3>table6  table-responsive 拉到一定距离 会自动补上边框 </h3>
	<table class="table  table-responsive">
	
		<thead>
	
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>城市</th>
				<th>注册时间</th>
			</tr>
		</thead>
	
	
		<tbody>
	
			<tr>
				<td>frank</td>
				<td>18</td>
				<td>上海</td>
				<td>2022-10-12</td>
			</tr>
	
	
	
			<tr>
				<td>laoda</td>
				<td>18</td>
				<td>郑州</td>
				<td>2022-11-12</td>
			</tr>
	
	
			<tr>
				<td>whh</td>
				<td>18</td>
				<td>合肥</td>
				<td>2022-04-12</td>
			</tr>
	
	
			<tr>
				<td>李栓丹</td>
				<td>28</td>
				<td>西安</td>
				<td>2022-04-12</td>
			</tr>
			
			
			<tr>
				<td>王铁锤</td>
				<td>28</td>
				<td>合肥</td>
				<td>2022-04-12</td>
			</tr>
		</tbody>
	
	</table>
	
	</body>
</html>
